<template>
  <van-nav-bar
    fixed
    :title="$route.query.type == 'add' ? '新增文章' : '修改文章'"
    left-text="返回"
    left-arrow
    :placeholder="true"
    :safe-area-inset-top="true"
    @click-left="$router.go(-1)"
  />
  <div class="part_right">
    <div class="title">文章标题</div>
    <van-field
      v-model="title"
      required
      placeholder="请输入文章标题"
      @blur="error = title == '' ? true : false"
      :error="error"
      @input="title = title.trim()"
    />
    <div class="title">文章内容</div>
    <!-- 文本编译器 -->
    <Editor
      ref="Editor"
      :value="content"
      @onEditor="onEditor"
      class="content"
    />
    <div class="title">选择标签（最多5个）</div>
    <!-- 选中标签 -->
    <van-tag
      v-for="tag in 5"
      :key="tag.id"
      type="primary"
      plain
      size="medium"
      closeable
      @close="closeTag"
    >
      vue
    </van-tag>
    <!-- 新增标签 -->
    <van-tag type="danger" plain size="medium" @click="searchShow = true">
      <van-icon name="plus" />
      新增
    </van-tag>
    <div class="title">文章封面</div>
    <van-uploader
      v-model="fileList"
      :after-read="afterRead"
      multiple
      :max-count="1"
      class="ml-5"
    />
    <van-button
      class="mt-10 mb-20"
      type="primary"
      block
      size="small"
      @click="savaBtn"
    >
      提交
    </van-button>
    <!-- 弹出层 搜索tag -->
    <search-popup v-model:searchShow="searchShow"></search-popup>
  </div>
</template>

<script>
// 引入vue方法
import { onMounted, reactive, toRefs, defineComponent, ref } from "vue";
// 引入富文本
import Editor from "./components/editor.vue";
import searchPopup from "./components/searchPopup.vue";
import { artcle, file } from "@/api/api.js";
import { Toast } from "vant";
export default defineComponent({
  name: "about",
  components: {
    Editor,
    searchPopup,
  },

  setup() {
    const Editor = ref();
    const state = reactive({
      content: "",
      //获取富文本中的内容
      onEditor: (value) => {
        // console.log("父组件", value);
        state.content = value;
      },
      // 富文本回显
      showBack: () => {
        state.content = ""; //回显内容 qdleader
        console.log("state.content", state.content);
        setTimeout(() => {
          Editor.value.getContent();
        });
      },
      fileList: [],
      title: "", //标题内容
      state: "PUSH", // 文章状态
      coverImg: "", // 封面地址
      tagList: [], // 标签id
      error: false, // 错误提示
      searchShow: false, // tag 搜索弹出层
      keWords: "", // 弹出层 tag 搜索框
    });
    // 加载回显
    onMounted(() => {
      state.showBack();
    });

    // 提交文章信息
    const savaBtn = async () => {
      if (state.title == "") {
        // 判断标题是否有
        state.error = true;
        return Toast.fail("请输入文章标题");
      }
      if (state.content == "" || state.content.trim() == "") {
        return Toast.fail("请输入文章内容"); // 判断内容是否有
      }
      let param = {
        title: state.title,
        content: state.content,
        state: state.state,
        coverImg: state.coverImg,
        tagList: state.tagList,
      };
      const { data: res } = await artcle.update(param);
      if (res.status != 0) return Toast.fail(res.message);
      console.log(state.content);
    };
    // 关闭标签
    const closeTag = (data) => {
      console.log(data);
    };
    const afterRead = async (files) => {
      // 此时可以自行将文件上传至服务器
      console.log(files);
      files.status = "uploading";
      files.message = "上传中...";

      var formData = new FormData();
      formData.append("file", files.file);
      const { data: res } = await file.update(formData, {
        headers: {
          "Content-Type": "multipart/form-data;",
        },
      });
      console.log(res);
      if (res.status != 0) {
        files.status = "failed";
        files.message = "上传失败";
        return;
      }
      files.status = "success";
      return (state.coverImg = res.data.url);
    };
    return {
      ...toRefs(state),
      Editor,
      savaBtn,
      closeTag,
      afterRead,
    };
  },
});
</script>
<style scoped lang="less">
/deep/.van-nav-bar--fixed{
  z-index: 19;
}
.part_right {
  padding: 0 10px;
  box-sizing: border-box;
}
.title {
  box-sizing: border-box;
  padding: 2px 10px;
  border-left: 5px solid #0076f6;
  font-size: 14px;
  margin: 5px 0;
}
.content {
  //   min-height: 400px;
  border: 1px solid #dcdee0;
}
/deep/.w-e-text-container {
  min-height: 300px;
}
.van-tag {
  margin-top: 5px;
  font-weight: normal;
  margin-left: 5px;
}
</style>
